<template>
  <div class="container">
    <div class="title">批注</div>
    <div class="input-row">
      <el-input placeholder="请输入" size="medium" v-model="keyword" @keyup.native.enter="handleFilter">
        <el-button slot="append" icon="el-icon-search" @click="handleFilter"></el-button>
      </el-input>
    </div>
    <div class="card-list">
      <CommentCard
        v-for="item of commentList"
        cardType="comment"
        :item="item"
        :key="'comment' + item.id"
        @card-click="handleSelectComment(item)"
      >
        <div class="reply-list">
          <CommentCard
            v-for="reply of item.replyList"
            class="reply-card"
            cardType="reply"
            :item="reply"
            :commentId="item.id"
            :key="'reply' + reply.id"
            @card-click="handleSelectComment(item)"
          ></CommentCard>
        </div>
      </CommentCard>
      <div style="text-align: center" v-if="!commentList.length">
        {{ loading ? '数据加载中，请稍等...' : '暂无数据' }}
      </div>
    </div>
  </div>
</template>

<script>
// import tinymce from 'tinymce/tinymce'
import CommentCard from './CommentCard.vue'
import { fetchComments } from '@/api'
import { scrollAndSelectRange } from '@/utils/helpers'

export default {
  components: { CommentCard },
  data() {
    return {
      loading: false,
      keyword: ''
    }
  },
  computed: {
    commentList() {
      return this.$store.state.xmleditor.commentList
    }
  },
  methods: {
    async handleFilter() {
      this.loading = true
      await fetchComments(this.keyword)
      this.loading = false
    },
    handleSelectComment(item) {
      scrollAndSelectRange(item)
    }
  },
  mounted() {
    this.handleFilter()
  }
}
</script>

<style scoped>
.reply-card {
  margin-top: 0.5rem;
  margin-left: 1.2rem;
  padding: 0 0 10px 0;
}
.card {
  border-bottom: 1px solid #ccc;
}
/* .reply-list .reply-card:last-child { */
.reply-list .reply-card {
  border-bottom: none;
}
/* 以下重复内容，可复用 */
.container {
  padding: 20px;
}

.title {
  font-size: 18px;
  font-weight: bold;
}
.input-row {
  margin: 10px 0;
}
::v-deep .el-input__inner {
  appearance: none;
  background-color: #fff;
  background-image: none;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  box-sizing: border-box;
  color: #606266;
  display: inline-block;
  font-size: inherit;
  height: 40px;
  line-height: 40px;
  outline: none;
  padding: 0 15px;
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  width: 100%;
}
::v-deep .el-input-group__append {
  background-color: #f5f7fa;
  color: #909399;
  vertical-align: middle;
  display: table-cell;
  position: relative;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 0 20px;
  width: 1px;
  white-space: nowrap;
}
::v-deep .el-input-group__append {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;

  border-left: 0;
}
::v-deep .el-button {
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background: #fff;
  border: 1px solid #dcdfe6;
  color: #606266;
  appearance: none;
  text-align: center;
  box-sizing: border-box;
  outline: none;
  margin: 0;
  transition: 0.1s;
  font-weight: 500;
  user-select: none;
  padding: 12px 20px;
  font-size: 14px;
  border-radius: 4px;
}

::v-deep .el-textarea {
  position: relative;
  display: inline-block;
  width: 100%;
  vertical-align: bottom;
  font-size: 14px;
}

::v-deep .el-textarea__inner {
  display: block;
  resize: vertical;
  padding: 5px 15px;
  line-height: 1.5;
  box-sizing: border-box;
  width: 100%;
  font-size: inherit;
  color: #606266;
  background-color: #fff;
  background-image: none;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}
</style>
